<template>
  <view>
    <view class="fileUploadCell">
      <slot></slot>
      <!-- 拍照 -->
      <view class="photoVedio" v-if="type === 'submit'">
        <view class="box" @click="camera" v-if="takePicList.length < 4">
          <image class="btnicon" src="/static/img/icons/camera.png"> </image>
          <view>拍照</view>
        </view>
        <view class="box" v-else>
          <image class="btnicon" src="/static/img/icons/dis_camera.png"> </image>
          <view>拍照</view>
        </view>
      </view>
    </view>
    <view class="albumContainer">
      <block v-if="takePicList.length > 0">
        <block v-for="(item, index) in takePicList" :key="index">
          <image
            class="imgStyle"
            :src="item.path ? baseurl+'/'+item.path: baseurl+'/'+item.result.path"
            @tap="previewPictures(index)"
            @longpress="delImg"
            :data-index="index"
            v-if="!item.canvasPath"
          ></image>
          <view class="imgStyle2" v-else>
            <image
              style="width: 100%;height: 100%;display: block"
              :src="item.canvasPath"
              @tap="previewPicturesCanvas(index)"
              @longpress="delImg"
              :data-index="index"
            ></image>
          </view>

        </block>
      </block>
      <block v-else>
        <view class="imgStyle">
          <view class="imgText">暂无图片</view>
        </view>
      </block>
    </view>
  </view>
</template>
<script>
import {BASE_URL, UPLOAD_URL} from "../../util/api";
export default {
  name: "Picture",
  props: {
    type: {
      type: String,
      default: 'submit'
    },
    albumList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      baseurl: BASE_URL,
      // 拍照
      takePicList: []
    };
  },
  mounted () {
    if (this.albumList.length > 0) {
      // console.log('debug---', this.albumList)
      this.takePicList = [...this.albumList]
    }
  },
  methods: {
    init () {
      this.takePicList = []
    },
    // 选择图片发送
    chooseImage() {
      // console.log("相册选图");
      // this.photoVisible = true;
      // this.$refs.photop.init();
      uni.setNavigationBarTitle({
        title: "拍照",
      });
      this.getImage();
    },
    //拍照发送
    camera() {
      this.getImage();
    },
    //选照片 or 拍照
    getImage() {
      // console.log('debug3-----');
      const _self = this
      uni.chooseImage({
        sourceType: ['album','camera'],
        sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          uni.showLoading({
            title: '加载中'
          });
          // console.log("debug1------", res);
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url : UPLOAD_URL,
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              'type': 'image'
            },
            success: function (uploadFileRes) {
              uni.hideLoading();
              // console.log('debug------', JSON.parse(uploadFileRes.data));
              _self.takePicList.push(JSON.parse(uploadFileRes.data));
              _self.$emit('takePic', _self.takePicList)
            }
          });
        },
      });
    },
    /*
			图片预览
			 */
    previewPictures(index) {
      // console.log('previewPictures-----------', item)
      let photo_arr = []
        photo_arr = this.takePicList.map(item => {
          if (item.hasOwnProperty('result')) {
            return item.result.url;
          } else {
            return item.url
          }
        });
      uni.previewImage({
        current: index,
        urls: photo_arr,
      });
    },
    previewPicturesCanvas(index) {
      let photo_arr = []
        photo_arr = this.takePicList.map(item => item.canvasPath);
      uni.previewImage({
        current: index,
        urls: photo_arr,
      });
    },
    // 长按删除图片
    delImg(e) {
      let that = this
      if (this.type === 'detail')
        return;
      // console.log("delImg----", e);
      const index = e.currentTarget.dataset.index; //获取当前长按图片下标
      // console.log("index----", index);
      uni.showModal({
        title: "删除图片",
        content: "确定删除图片?",
        success: (res) => {
          if (res.confirm) {
            // console.log("点击确定了---", that.takePicList);
            that.takePicList.splice(index, 1);
            that.$emit('delPic', index)
          } else if (res.cancel) {
            // console.log("点击取消了");
            return false;
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.fileUploadCell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 26rpx 32rpx 26rpx 20rpx;
  font-size: 28rpx;
  line-height: 54rpx;
  color: #606266;
  background-color: #fff;
  text-align: left;
}
.photoVedio {
  display: flex;
}
.box {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}
.btnicon {
  width: 80rpx;
  height: 80rpx;
}
.albumContainer {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 5rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}
.imgStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  width: 140rpx;
  height: 140rpx;
  margin: 0 20rpx 20rpx;
  border-radius: 10rpx;
  border: 1rpx solid #eee;
}
.imgStyle2 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  width: 140rpx;
  height: 140rpx;
  margin: 0 20rpx 20rpx;
  border-radius: 10rpx;
  border: 1rpx solid #eee;
}
</style>
